---
sidebar_position: 13
---

# Demo

This is used by default to demonstrate the component's capabilities without connecting to any APIs.

### `demo` {#demo}

- Type: `true` | \{ <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `response?:` [`Response`](/docs/connect#Response) | ([`message: MessageContent`](/docs/messages/#MessageContent)) => [`Response`](/docs/connect#Response), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `displayLoadingBubble?: boolean`, <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `displayFileAttachmentContainer?: boolean`, <br />
  &nbsp;&nbsp;&nbsp;&nbsp; `displayErrors?: {`<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `default?: boolean`, <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `service?: boolean`, <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `speechToText?: boolean` <br />
  }\}

Set this to _true_ or define an object with properties to remove the initial setup guidance message. <br />
`response` is used to override the default demo response with a custom one. It can either be a [`Response`](/docs/connect#Response) object or a function that returns
a [`Response`](/docs/connect#Response) object. <br />
The following properties are used to toggle elements to showcase their design without making any user actions: <br />
`displayLoadingBubble` is used to display the loading bubble. <br />
`displayFileAttachmentContainer` is used to display the element that encapsulates all of the files to be sent on the next message. <br />
`displayErrors` is used to display error messages; for the component via `default`, an API error via `service` and a speech to text issue via `speechToText`.
This is mainly used to showcase the override capabilities in [`errorMessages`](/docs/messages#errorMessages). <br />

import ContainersKeyToggle from '@site/src/components/table/containersKeyToggle';
import ComponentContainer from '@site/src/components/table/componentContainer';
import DeepChatBrowser from '@site/src/components/table/deepChatBrowser';
import LineBreak from '@site/src/components/markdown/lineBreak';
import BrowserOnly from '@docusaurus/BrowserOnly';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';

<BrowserOnly>{() => require('@site/src/components/nav/autoNavToggle').readdAutoNavShadowToggle()}</BrowserOnly>

#### Base Example

<ComponentContainer>
  <DeepChatBrowser style={{borderRadius: '8px'}} demo={true}></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat demo="true"></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat demo="true" style="border-radius: 8px"></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

#### Custom Response Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    introMessage={{text: 'Rock, Paper, Scissors! Make your guess and see who wins!'}}
    demo={{
      response: (message) => {
        const options = ['rock', 'paper', 'scissors'];
        const userOption = message.text?.toLocaleLowerCase();
        const aiOption = options[Math.floor(Math.random() * 3)];
        let response = `I guessed ${aiOption}. `;
        if (userOption === aiOption) response += "It's a draw.";
        else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
        else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
        else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
        else response = 'Guess either Rock, Paper or Scissors';
        return {text: response};
      },
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```javascript
chatElementRef.demo = {
  response: (message) => {
    const options = ['rock', 'paper', 'scissors'];
    const userOption = message.text?.toLocaleLowerCase();
    const aiOption = options[Math.floor(Math.random() * 3)];
    let response = `I guessed ${aiOption}. `;
    if (userOption === aiOption) response += 'Draw';
    else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
    else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
    else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
    else response = 'Guess either Rock, Paper or Scissors';
    return {text: response};
  },
};
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  id="chat-element"
  introMessage='{"text": "Rock, Paper, Scissors! Make your guess and see who wins!"}'
  style="border-radius: 8px"
></deep-chat>

<script>
// ...other code
const chatElementRef = document.getElementById('chat-element');
chatElementRef.demo = {
  response: (message) => {
    const options = ['rock', 'paper', 'scissors'];
    const userOption = message.text?.toLocaleLowerCase();
    const aiOption = options[Math.floor(Math.random() * 3)];
    let response = `I guessed ${aiOption}. `;
    if (userOption === aiOption) response += 'Draw';
    else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
    else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
    else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
    else response = 'Guess either Rock, Paper or Scissors';
    return {text: response};
  },
};
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

#### Elements Example

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    demo={{
      displayLoadingBubble: true,
      displayFileAttachmentContainer: true,
      displayErrors: {service: true},
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  demo='{
    "displayLoadingBubble": true,
    "displayFileAttachmentContainer": true,
    "displayErrors": {"service": true}
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  demo='{
    "displayLoadingBubble": true,
    "displayFileAttachmentContainer": true,
    "displayErrors": {"service": true}
  }'
  style="border-radius: 8px"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>
